<template>
    <view class="custom-tab-bar">
        <view class="custom-tab-bar-item"
            v-for="(item, index) in list"
            :key="index"
            :class="current == index ? 'active': ''"
            @click="handlerClick(index)" >
            <view class="tab-bar-item_icon">
                <u-icon :name="item.iconPath" size="48"></u-icon>
            </view>
            <view class="tab-bar-item_name">
                {{item.text}}
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, defineProps, computed, defineEmits } from 'vue'
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    current: Number
})

const emit = defineEmits(['tabChange'])
const handlerClick = (item:any) => {
    emit('tabChange', item)
}
</script>

<style lang="scss" scoped>
.custom-tab-bar{
    position: fixed;
    bottom: 0;
    height: 74px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1rpx rgba(0, 0, 0, 0.33) solid;
    color: #a6a6a6;
    background: #fff;
    .custom-tab-bar-item{
        flex: 1;
        text-align: center;
        &.active{
            color: #4d8fff
        }
    }
}
</style>
